import { Connect } from 'dob-react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Icon from '../../components/icon/src';
import * as Styled from './index.style';
import { Props, State } from './index.type';

@Connect
class DragMenu extends React.Component<Props, State> {
  public static defaultProps = new Props();

  public state = new State();

  private listContainer: React.ReactInstance;

  public componentDidMount() {
    this.props.actions.ViewportAction.registerOuterDrag(ReactDOM.findDOMNode(this.listContainer) as HTMLElement);
  }

  public render() {
    return (
      <Styled.Container>
        <Styled.Title>
          <div>{this.props.stores.ApplicationStore.setLocale('拖拽组件', 'Drag Component')}</div>
          <Styled.CloseContainer onClick={this.handleCloseLeftBar}>
            <Icon type="close" size={15} />
          </Styled.CloseContainer>
        </Styled.Title>

        <Styled.SearchInput
          value={this.state.searchContent}
          onChange={this.handleSearch}
          placeholder={this.props.stores.ApplicationStore.setLocale('搜索..', 'Search..')}
        />

        <Styled.ListContainer
          ref={(ref: React.ReactInstance) => {
            this.listContainer = ref;
          }}
        >
          {this.getList()}
        </Styled.ListContainer>

        {this.props.actions.ApplicationAction.loadPluginByPosition('toolContainerDragMenuList')}
      </Styled.Container>
    );
  }

  private getList = () => {
    return Array.from(this.props.stores.ApplicationStore.componentClasses)
      .filter(([gaeaKey, componentClass]) => {
        const setting = this.props.stores.ApplicationStore.componentSetting.get(gaeaKey);

        // 如果被设置为了预设组件，过滤掉
        if (
          Array.from(this.props.stores.ApplicationStore.preComponents.keys()).some(
            preGaeaKey => preGaeaKey === setting.key,
          )
        ) {
          return false;
        }

        // 如果搜索框没有输入，展示
        if (this.state.searchContent === '') {
          return true;
        }

        return new RegExp(this.state.searchContent).test(setting.name);
      })
      .map(([gaeaKey, componentClass], index) => {
        const setting = this.props.stores.ApplicationStore.componentSetting.get(gaeaKey);

        return (
          <Styled.Component key={`standard${index}`} data-gaea-key={setting.key}>
            {setting.name}
          </Styled.Component>
        );
      })
      .concat(Array.from(this.props.stores.ApplicationStore.preComponents).map(
        ([gaeaKey, preComponentInfos], index) => {
          const componentClass = this.props.stores.ApplicationStore.componentClasses.get(gaeaKey);
          return Array.prototype.concat.apply(
            [],
            preComponentInfos
              .filter(preComponentInfo => {
                const setting = this.props.stores.ApplicationStore.componentSetting.get(gaeaKey);

                // 如果搜索框没有输入，展示
                if (this.state.searchContent === '') {
                  return true;
                }

                return new RegExp(this.state.searchContent).test(setting.name);
              })
              .map((preComponentInfo, childIndex) => {
                const setting = this.props.stores.ApplicationStore.componentSetting.get(gaeaKey);

                return (
                  <Styled.Component
                    key={`preSetting${index}&${childIndex}`}
                    data-gaea-key={componentClass.defaultProps.editSetting.key}
                    data-props={JSON.stringify(preComponentInfo.props)}
                    data-pre-gaea-key={gaeaKey}
                  >
                    {preComponentInfo.name}
                  </Styled.Component>
                );
              }),
          );
        },
      ) as any);
  };

  private handleCloseLeftBar = () => {
    this.props.actions.ApplicationAction.setLeftTool(null);
    this.props.actions.ApplicationAction.setRightTool(null);
  };

  private handleSearch = (event: React.FormEvent<HTMLInputElement>) => {
    this.setState({
      searchContent: event.currentTarget.value as string,
    });
  };
}

export default {
  position: 'toolContainerLeftDragMenu',
  class: DragMenu,
};
